<template>

	<view  style="padding-bottom: 150rpx;">
		<u-navbar class="avatar" :border-bottom="false" :background="background" :is-back="true" title-color="#000000" title="开通会员">
		</u-navbar>
		<view class="user">
			<view class="deco">
				
			</view>
			<view class="header">
				<view class="left">
					<view class="avatar">
						<u-avatar size="70" :src="info && info.avatar ?(info && info.avatar) :'/static/aidex/images/b6.png'"></u-avatar>
					</view>
					<view class="names">
						<view class="name">
								{{(info && info.nickname) || ''}}
						</view>
						
					</view>
				</view>
				<view class="home">

				</view>
			</view>
			<view class="navs">
				<view class="left">
					<view class="top">
						<view class="logo">
							<image class="img1" src="/static/aidex/images/vip2.png" mode=""></image>
							<text>年卡</text>
							<image class="img2" src="/static/aidex/images/VIP0.png" mode=""></image>
						</view>
					</view>
					<view class="desc">
						平台年卡 让您畅行无忧
					</view>
					
					<view class="bot">
						<!-- <text>1</text>
						元/年 -->
						{{baseinfo.remark}}
					</view>
				</view>
				
			</view>

		</view>
		<view class="cacu">
			<view class="item">
				<image src="/static/aidex/images/c1.png" mode=""></image>
				全年免费电话咨询
			</view>
			<view class="item">
				<image src="/static/aidex/images/c2.png" mode=""></image>
				全年免费微信咨询
			</view>
			<view class="item">
				<image src="/static/aidex/images/c3.png" mode=""></image>
				免费参加公益课程
			</view>
			<view class="item">
				<image src="/static/aidex/images/c4.png" mode=""></image>
				全年免费见面咨询
			</view>
			<view class="item">
				<image src="/static/aidex/images/c5.png" mode=""></image>
				免费出具法律问题解决方案和处理意见
			</view>
			<view class="item">
				<image src="/static/aidex/images/c6.png" mode=""></image>
				免费提供800份各类合同文书模版
			</view>
			<view class="item">
				<image src="/static/aidex/images/c7.png" mode=""></image>
				案件代理、合同审查等服务类项目{{from?8:5}}折优惠
			</view>
			
		</view>
		
		<view v-if="info.isvip==1" class="btns11">
			<view @click="wx(baseinfo)" class="item">
				<image src="/static/aidex/images/wx.png" mode=""></image>
				微信咨询
			</view>
			<view class="item" @click="tell(baseinfo)">
				<image src="/static/aidex/images/tel.png" mode=""></image>
				电话咨询
			</view>
		</view>

		<view v-else class="btns">
			<u-button @click="pay" class="btn" shape="circle" type="primary" :ripple="true" ripple-bg-color="#909399">立即支付，开通会员</u-button>
		</view>
		
		<!-- 添加二维码 -->
		
		<u-popup close-icon-color="#999" :closeable="true" v-model="show" mode="center" border-radius="14">
			<view class="pop">
		
				<image :show-menu-by-longpress="true" :src="baseinfo.platform_image" mode=""></image>
				<view class="tips">
					长按识别二维码添加客服
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false,
				from:'',
				baseinfo:'',
				info:null,
				iconSize: 38,
				background: {
					backgroundImage: "linear-gradient( 180deg, #CBECD5 0%, #d8f0df 100%)",
				},
			};
		},
		computed: {

			avatarUrl() {
				// let url = this.vuex_user.avatarUrl || '/ctxPath/static/images/user1.jpg';
				// url = url.replace('/ctxPath/', this.vuex_config.baseUrl + '/');
				let url = this.vuex_config.baseUrl + this.vuex_user.avatar || '/static/lawyer/tabbar/my_2.png';
				url = this.replaceAll(url, '\\', '/');
				return url + '?t=' + new Date().getTime();
			}
		},
		onLoad(e) {
			this.from = e.from
		},
		onShow() {
			this.getuserinfo()
			this.getvipinfo()
		},
		methods: {
			
			tell(item) {
				uni.makePhoneCall({
					phoneNumber: item.platform_tel, // 电话号码
					success: function() {
						console.log('拨打电话成功！');
					},
					fail: function(err) {
						console.log('拨打电话失败：', err);
					}
				});
			},
			wx(item) {
				this.show = true
			},
			getvipinfo(){
				this.$u.api
					.vipinfo()
					.then((res) => {
						this.baseinfo = res?.data
						// 模拟写死
						// this.info.isvip = 1;
					});
			},
			
			getuserinfo() {
				this.$u.api
					.userinfo()
					.then((res) => {
						this.info = res?.data
						
						this.$u.vuex("vuex_srls_isvip", res?.data?.isvip);
						this.$u.vuex("vuex_user", res?.data);
						// 模拟写死
						// this.info.isvip = 1;
					});
			},
			pay(){
				let that = this;
				this.$u.api
					.Orderbuy({
						type:1,
					})
					.then((resDate) => {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: resDate?.timeStamp,
							nonceStr: resDate?.nonceStr,
							package: resDate?.package,
							signType: resDate?.signType,
							paySign: resDate?.paySign,
							success: function(res) {
								that.getuserinfo()
								setTimeout(()=>{
									uni.switchTab({
										url:"/pages/sys/user/index"
									})
								},1500)
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
						
					});
				
			},
			
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>
<style lang="scss">
	
	.pop {
		padding: 30rpx 50rpx;
	
		image {
			width: 500rpx;
			height: 500rpx;
			margin: 10rpx auto;
		}
	
		.tips {
			text-align: center;
			padding: 20rpx 0;
			color: #999;
		}
	}
	page{
		background: #fff;
	}
	@import 'join.scss';
	
	.btns11 {
		
		margin: 30rpx 24rpx;
		height: 92rpx;
		background: #00B9A7;
		border: 1px solid #00B9A7;
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: fixed;
		bottom:50rpx ;
		left: 24rpx;
		right: 24rpx;
	
		.item {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			height: 96rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
	
			&:first-child {
				background: #FFFFFF;
				color: #00B9A7;
			}
	
			&:last-child {
				background: #00B9A7;
				color: #fff;
			}
	
			image {
				margin-right: 14rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
</style>